<template>
    <div class="w750 white-bg">
        <div class="login" :class="themes.theme">
            <div class="login-box">
                <div class="item">
                    <input type="text" class="item-input" maxlength="11" @blur="isPhoneExist" v-model="phone" placeholder="请输入手机号" />
                </div>
                <div class="item code">
                    <input type="text" class="item-input" maxlength="6" v-model="code" placeholder="请输入短信验证码" />
                    <getvali-date codeType="reg" :codeMobile="phone" :class="'code-txt'" @sendCode="getInvRelationShipSetting" />
                </div>
                <div class="item"><input type="password" class="item-input" v-model="pwd" placeholder="请输入密码" /></div>
                <div class="item"><input type="password" class="item-input" v-model="surePwd" @blur="checkPwd" placeholder="再次输入密码" /></div>
                <div class="tip">密码应为6-20位字母、数字和标点符号的组合</div>
                <template v-if="inviteSetting.registerNeedInviter && !inviteSetting.hasInvitationRelationship && !inviteSetting.oldUser">
                    <div class="item">
                        <input type="text" class="item-input" v-model="invitationCode" placeholder="邀请码" />
                    </div>
                    <div v-if="inviteSetting.registerNeedInviter && !inviteSetting.hasInvitationRelationship && inviteSetting.defaultInvitationCode" class="d-flex a-center font-12 py-1">
                        <span class="flex-1">备选邀请码：{{ inviteSetting.defaultInvitationCode }}</span>
                        <span class="bg-main text-fff p-1 rounded-6" @click="fillInviteCode">一键填入</span>
                    </div>
                </template>
                <div class="agreement">
                    <input type="checkbox" v-model="agreement" />
                    <em style="font-size: 10px; margin-left: 5px">已阅读并同意</em>
                    <em class="agreement-a" @click="goAgreement('USER_REG_TYPE')" :style="{ color: themes.color }" style="font-size: 10px">
                        《用户协议》
                    </em>
                    <em class="agreement-a" :style="{ color: themes.color }" style="font-size: 10px">及</em>
                    <em
                        class="agreement-a"
                        @click="goAgreement('SAAS_PRIVACY_PROTOCOL_TYPE')"
                        :style="{ color: themes.color }"
                        style="font-size: 10px"
                    >
                        《隐私协议》
                    </em>
                </div>
            </div>
            <div class="b-btn" @click.prevent="register"><a href="#" class="btn-r">注册并登录</a></div>
        </div>
    </div>
</template>

<script>
import getvaliDate from 'components/getvaliDate/getvaliDate'
import { mapState } from 'vuex'
import { checkPhoneExist, userReg } from 'api/register'
import { InvRelationShipSetting } from 'api/my'

export default {
    components: {
        getvaliDate
    },
    data() {
        return {
            userName: '', // 手机号码，或者用户名，邮箱
            pwd: '', //密码
            surePwd: '', //再次输入密码
            phone: '', // 手机号码
            code: '', //验证码
            invitationCode: '', //邀请码
            isInvita: false, //是否本地存在邀请码，如果存在不给修改邀请码，如果没有可以修改邀请码
            countDown: 0, // 倒计时
            isUsername: true, //用户名是否重复  true为重复
            isPhone: true, //手机号是否重复  true为重复
            agreement: false, //注册协议

            inviteSetting: {} // 邀请关系配置
        }
    },
    mounted() {
        // let invitCode = localStorage.getItem('invitCode')
        // if (invitCode) {
        //     this.invitationCode = invitCode
        //     this.isInvita = true
        // }
    },
    methods: {
        //验证手机号是否存在
        isPhoneExist() {
            checkPhoneExist({ phone: this.phone }).then((res) => {
                if (res.status == 1) {
                    if (res.result) {
                        this.$toast('该手机号已存在')
                        this.isPhone = true
                        return
                    } else {
                        this.isPhone = false
                    }
                } else {
                    this.$toast(res.msg)
                    this.isPhone = true
                }
            })
        },

        //两次密码是否一致
        checkPwd() {
            if (this.pwd.length && this.surePwd.length && this.pwd == this.surePwd) {
            } else {
                this.$toast('两次密码不一致')
            }
        },

        //注册
        register() {
            if (!this.phone) {
                this.$toast('请输入手机号')
                return
            }

            if (this.isPhone) {
                //手机号是否重复
                this.$toast('该手机号已存在')
                return
            }

            if (this.phoneRight == false) {
                this.$toast('请输入正确的手机号码')
                return
            }
            if (!this.code) {
                this.$toast('请输入验证码')
                return
            }
            if (!this.pwd) {
                this.$toast('请输入密码')
                return
            }
            if (!this.surePwd) {
                this.$toast('请再次输入密码')
                return
            }
            if (this.pwd && this.surePwd && this.pswRegx && this.pswRegx1) {
                if (this.pwd.length && this.surePwd.length && this.pwd == this.surePwd) {
                } else {
                    this.$toast('两次密码不一致')
                    return
                }
            } else {
                this.$toast('密码应为6-20位字母、数字和标点符号的组合')
                return
            }
            if (!this.agreement) {
                this.$toast('请先阅读用户注册协议')
                return
            }

            let params = {
                phone: this.phone,
                invitationCode: this.invitationCode,
                verificationCode: this.code,
                regSource: window.plus ? '5' : '3',
                password: this.pwd
            }
            userReg(params).then((res) => {
                if (res.status == 1) {
                    this.$router.push('/login')
                    this.$toast('注册成功')
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        //发送验证码
        getVerifyCode() {
            //禁止点击
            if (this.phoneRight === false) {
                this.$toast('请输入正确的手机号码')
                return
            }

            checkPhoneExist({ phone: this.phone })
                .then((res) => {
                    if (res.status == 1) {
                        if (res.result) {
                            this.$toast('该手机号已存在,可直接登录')
                            this.isPhone = true
                            return
                        } else {
                            this.isPhone = false

                            if (this.countDown <= 0) {
                                let params = {
                                    phoneNumber: this.phone,
                                    source: 'reg'
                                }
                                return sendSMSCode(params)
                            }
                        }
                    } else {
                        this.$toast(res.msg)
                        this.isPhone = true
                    }
                })
                .then((result) => {
                    if (result.status == 1) {
                        // 开启倒计时
                        if (this.phone && !this.isPhone) {
                            this.countDown = 60
                            this.intervalId = setInterval(() => {
                                this.countDown--
                                if (this.countDown == 0) {
                                    clearInterval(this.intervalId)
                                }
                            }, 1000)
                        }
                    } else {
                        this.$toast(result.msg)
                    }
                })
        },
        //去阅读注册协议
        goAgreement(type) {
            this.$router.replace({
                path: `/agreement`,
                query: {
                    type: type
                }
            })
        },

        // 填入邀请码
        fillInviteCode() {
            if (!this.isInvita) {
                this.invitationCode = this.inviteSetting.defaultInvitationCode
            } else {
                this.$toast('邀请码不可修改')
            }
        },

        // 获取配置
        getInvRelationShipSetting() {
            InvRelationShipSetting({
                mobilePhone: this.phone
            }).then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }

                this.inviteSetting = res.result
            })
        }
    },
    computed: {
        ...mapState(['themes']),
        //检测手机号码是否正确
        phoneRight() {
            return /^1[0-9][0-9]{9}$/.test(this.phone)
        },

        //检测密码是否正确
        pswRegx() {
            return /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-z]|[A-Z]|[0-9]){6,20}$/.test(this.pwd)
        },
        //检测密码是否正确
        pswRegx1() {
            return /^[0-9A-z`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]+$/.test(this.pwd)
        }
    }
}
</script>

<style src="../../assets/css/login.css" scoped></style>
